<template>
	<div>
		<el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header" >
          <strong style="font-size:15px">产品经理工作质量考核指标</strong>
        </div>
      </template>

      <vxe-table
        border
        show-overflow
        show-footer
        height="380"
        ref="xTable"
        :align="'center'"
        :merge-footer-items="mergeFooterItems"
        :footer-method="footerMethod"
        :span-method="rowspanMethod"
        :data="tableData"
        :edit-rules="demo1.validRules"
        :edit-config="{trigger: 'click', mode: 'cell'}">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="role" title="一级指标"></vxe-table-column>
         <vxe-table-column field="name" title="二级指标"></vxe-table-column>
         <vxe-table-column field="power2" title="权重"></vxe-table-column>
        <vxe-table-column field="standard" title="考核标准" ></vxe-table-column>
        <vxe-table-column field="goals" title="HR评分" :edit-render="{name: 'input', props: {placeholder: '请输入一级指标'}}"></vxe-table-column>
        <vxe-table-column field="goals2" title="项目经理评分" :edit-render="{name: 'input', props: {placeholder: '请输入一级指标'}}"></vxe-table-column>
        <vxe-table-column field="goals3" title="同事评分" :edit-render="{name: 'input', props: {placeholder: '请输入一级指标'}}"></vxe-table-column>
        <vxe-table-column title="该项平均分">
          <template #default="{ row }">
            <span>{{ countAmount(row) }}</span>
          </template>
        </vxe-table-column>
      </vxe-table>
    </el-card>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'

export default defineComponent({
  setup () {
    const xTable = ref({} as VxeTableInstance)

    const tableData = ref([
      { id: 10001, name: '需求文档结构清晰、要素完整、便于理解', nickname: 'T1', role: '单位开发周期工作质量', power1: '0.5', power2: '0.5', sex: '0', sex2: ['0'], num1: 40, age: 28, standard: '群众测评', date12: '', date13: '',goals:'',goals2:'',goals3:''},
      { id: 10002, name: '单位开发周期模块开发质量', nickname: 'T2', role: '单位开发周期工作质量', power1: '0.5', power2: '0.5', sex: '1', sex2: ['0', '1'], num1: 20, age: 22, standard: '群众测评', date12: '', date13: '2020-08-20',goals:'',goals2:'',goals3:'' },
      { id: 10003, name: '配合技术人员理解需求主动性', nickname: 'T3', role: '单位开发周期工作质量', power1: '0.5', power2: '1', sex: '0', sex2: ['1'], num1: 200, age: 32, standard: '群众测评', date12: '2020-09-10', date13: '' ,goals:'',goals2:'',goals3:''},
      { id: 10004, name: '配合技术人员理解需求主动性', nickname: 'T4', role: '工作态度', power1: '1', power2: '1', sex: '0', sex2: ['1'], num1: 200, age: 32, standard: '群众测评', date12: '2020-09-10', date13: '' ,goals:'',goals2: '',goals3:''},
    ])

    const demo1 = reactive({
      validRules: {
        role: [
          { required: true, message: '一级指标必须填写' }
        ],
        name: [
          { required: true, message: '二级指标必须填写' }
        ],
        standard: [
          { required: true, message: '考核标准必须填写' }
        ]
      }
    })

    const countAmount = (row: any) => {
      return (parseInt(row.goals) + parseInt(row.goals2) + parseInt(row.goals3)) / 3
    }

    const insertEvent = async () => {
      const $table = xTable.value
      const record = {}
      const { row: newRow } = await $table.insert(record)
      $table.setActiveCell(newRow, 'role')
    }

    const saveEvent = () => {
      const $table = xTable.value
      const body = $table.getRecordset()
      const { insertRecords, removeRecords, updateRecords } = body
      if (insertRecords.length || removeRecords.length || updateRecords.length) {
        $table.validate((errMap) => {
          if (errMap) {
            VXETable.modal.message({ status: 'error', message: '校验不通过！' })
          } else {
            VXETable.modal.message({ message: '保存成功！', status: 'success' })
          }
        })
      } else {
        VXETable.modal.message({ message: '数据未改动！', status: 'warning' })
      }
    }

    // 通用行合并函数（将相同多列数据合并为一行）
    const rowspanMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
      const fields = ['role']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }

    return {
      demo1,
      xTable,
      tableData,
      insertEvent,
      saveEvent,
      rowspanMethod,
      countAmount
    }
  },
  data () {
    return {
      mergeFooterItems: [
        { row: 0, col: 1, rowspan: 1, colspan: 4 },
        { row: 1, col: 1, rowspan: 1, colspan: 4 },
        { row: 2, col: 1, rowspan: 1, colspan: 7 }
      ]
    }
  },
  methods: {
    meanNum (list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count / list.length
    },
    sumNum (list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count
    },
    footerMethod ({ columns, data }) {
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '平均'
          }
          if (['goals', 'rate'].includes(column.property)) {
            return this.meanNum(data, 'goals')
          }
          if (['goals2', 'rate'].includes(column.property)) {
            return this.meanNum(data, 'goals2')
          }
          if (['goals3', 'rate'].includes(column.property)) {
            return this.meanNum(data, 'goals3')
          }
          if (['name'].includes(column.property)) {
            return ''
          }
          if (['role'].includes(column.property)) {
            return ''
          }
          return null
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '和值'
          }
          if (['goals', 'rate'].includes(column.property)) {
            return this.sumNum(data, 'goals')
          }
          if (['goals2', 'rate'].includes(column.property)) {
            return this.sumNum(data, 'goals2')
          }
          if (['goals3', 'rate'].includes(column.property)) {
            return this.sumNum(data, 'goals3')
          }
          return null
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '总分'
          }
          if (['role', 'rate'].includes(column.property)) {
            return this.meanNum(data, 'goals') + this.meanNum(data, 'goals2') + this.meanNum(data, 'goals3')
          }
          return null
        }),
      ]
      return footerData
    }
  },
});
</script>
<style lang="scss" scoped>
</style>